<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>LCPress - 文章编辑</title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
<link rel="stylesheet" href="/static/admin/css/main.css">
</head>
<body class="layui-layout-body">

	<div class="ad_form_div" id="form_div">
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">文章标题</label>
				<div class="layui-input-block">
					<input type="text" name="title" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item layui-form-text">
				<label class="layui-form-label">正文</label>
				<div class="layui-input-block">

					<div id="article_content">
						<p>请开始您的创作！</p>
					</div>

					<!--<textarea id="article_content" name="content"
						placeholder="请输入内容" class="layui-textarea"></textarea>-->

					<!--<textarea id="article_content" name="content" placeholder="请输入内容"  class="layui-textarea"></textarea>-->

				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">是否发布</label>
				<div class="layui-input-block">
					<input type="checkbox" name="switch" lay-skin="switch">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="form_create">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>


	<script src="/static/layui/layui.js"></script>
	<script type="text/javascript"
		src="https://unpkg.com/wangeditor@4.5.0/dist/wangEditor.min.js"></script>
	<script>
		function sleep(numberMillis) {
			var now = new Date();
			var exitTime = now.getTime() + numberMillis;
			while (true) {
				now = new Date();
				if (now.getTime() > exitTime)
					return;
			}
		}

		const E = window.wangEditor;
		const editor = new E('#article_content');
		// 或者 const editor = new E( document.getElementById('div1') )
		editor.config.uploadImgServer = '/articlemg/addarticlephoto_action';
		editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 2M
		editor.config.uploadImgMaxLength = 1;
		editor.config.uploadFileName = 'file';

		editor.config.uploadImgHooks = {
			// 图片上传并返回了结果，图片插入已成功
			success : function(xhr) {
				console.log('success', xhr);
				//sleep(1000);
			},
			// 图片上传并返回了结果，但图片插入时出错了
			fail : function(xhr, editor, resData) {
				console.log('fail', resData);
			},
			// 上传图片出错，一般为 http 请求的错误
			error : function(xhr, editor, resData) {
				console.log('error', xhr, resData);
			},
			// 上传图片超时
			timeout : function(xhr) {
				console.log('timeout');
			}
		}
		editor.create();

		layui.use([ 'form', 'jquery', 'layer', 'layedit' ], function() {

			var form = layui.form;
			var $ = layui.jquery;
			var layer = layui.layer;
			//var layedit = layui.layedit;
			//layedit.build('article_content'); //建立编辑器

			form.on('submit(form_create)', function(data) {
				var postdata = data.field;
				postdata["content"] = editor.txt.html();

				$.ajax({
					url : "addarticle_action",
					method : "POST",
					data : postdata,
					success : function(res) {

						if (res.code == 1) {
							layer.confirm(res.msg, {
								btn : [ '关闭' ] //可以无限个按钮
								,
								btn1 : function(index, layero) {
									layer.close(index)
									//按钮【按钮三】的回调
									var index = parent.layer
											.getFrameIndex(window.name); //先得到当前iframe层的索引
									parent.layer.close(index); //再执行关闭 
								}
							});
						} else if (res.code == 0) {
							layer.msg(res.msg);
						} else {
							layer.msg("未知错误");
						}

					}
				})

				return false
			})

		})
	</script>
</body>
</html>